<template>
  <div class="user_topics">
    <div class="title_nav">
      <h3 style="color:gray">我的话题</h3>
      <div>
        <a href="./topics/uploadTopics"><input type="button" value="上传"></a>
      </div>
    </div>
    <div class="topics_info">
      <ul>
        <li class="info_title">
          <span><svg class='icon' aria-hidden='true'><use xlink:href='#icon-bianhao'></use></svg> 编号</span>
          <span><svg class='icon' aria-hidden='true'><use xlink:href='#icon-fabiaopinglun'></use></svg> 标题</span>
          <span><svg class='icon' aria-hidden='true'><use xlink:href='#icon-shijian1'></use></svg> 发布时间</span>
          <span><svg class='icon' aria-hidden='true'><use xlink:href='#icon-shuliang'></use></svg>访问量/回复量</span>
          <span class="oper"><svg class='icon' aria-hidden='true'><use xlink:href='#icon-shezhi'></use></svg>操作</span>
        </li>
        <li v-for="item in res" :key="item.topicsid">
          <span>{{getIndex(item.topicsid)}}</span>
          <span>{{item.title}}</span>
          <span>{{getTime(item.time)}}</span>
          <span>{{item.visit +'/' + item.commentCount}}</span>
          <span class="oper">
            <a :href="'/topic/' + item.topicsid" target="_blank" class="btn btn_blue">
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-chakan'></use>
              </svg><span>查看</span>
            </a>
            <a href="JavaScript:;" @click="removeTopics(item.topicsid)" class="btn btn_red">
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-shanchu'></use>
              </svg><span>删除</span>
            </a>
          </span>
        </li>
        <li v-if="!res.length"><span>暂无结果</span></li>
      </ul>
      <paging-vue :result="topicsData" :count="12" @result="showRes"></paging-vue>
    </div>
  </div>
</template>

<script>
import pagingVue from '../../info/mini/paging.vue'
import { mapActions } from 'vuex'
import tool from '../../../assets/js/tool'
export default {
  name: 'Infotopics',

  data() {
    return {
      topicsData: [], // 所有话题数据集
      res: [] // 当前展示数据集
    };
  },

  computed:{
    getIndex(){
      return (index) => this.topicsData.map((v) => v.topicsid).indexOf(index) + 1 
    },
    getTime(){
      return (time) => tool.GetTimer(time)
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      this.$api.getUserTopics().then(res => {
        if(res instanceof Object){
          this.topicsData = res.data
        }else{
          this.showHint({title: '数据异常',isFlag: false})
        }
      })
    },
    // 删除话题
    removeTopics(id){
     if(confirm('确认删除?')){
      this.$api.removeTopics({id}).then(res => {
        if(res == 1){
          this.topicsData = this.topicsData.filter((obj) => obj.topicsid != id)
        }
        this.showHint(res == 1 ? {title:'删除成功',isFlag:true} : {title:res,isFlag:false})
      })
     }
    },
    // 过滤展示数据
    showRes(res){
      this.res = res
    },
    ...mapActions(['showHint'])
  },
  components: {
    pagingVue
  }
};
</script>

<style scoped>
.topics_info ul{
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid gray;
  border-bottom: none;
}
.topics_info ul li{
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}
.topics_info ul li:hover{
  background-color: antiquewhite;
}
.topics_info .info_title{
  background-color: green;
  color: white;
}
.topics_info .info_title:hover{
  background-color: green;
}
.topics_info li span{
  flex: 1;
  text-align: center;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  height: 40px;
  line-height: 40px;
}
.topics_info li span:first-child{
  max-width: 80px;
}
.topics_info li span:nth-child(2){
  flex: 2;
  text-align: left;
  padding-left: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topics_info li span a{
  margin: 0 5px;
}
.topics_info .oper span{
  line-height: 0;
  border: none;
  padding-left: 0 !important;
}
@media screen and (max-width: 800px){
  .user_topics{
    padding: 10px;
  }
  .topics_info li span:nth-child(2){
    flex: 1;
  }
  .topics_info li span:last-child{
    flex: 1.5;
  }
}
</style>